<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>任务详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="任务名称" prop="jobName">
            <el-input size="mini" class="ui-item-reset" v-model="quartzItem.jobName" disabled></el-input>
          </el-form-item>
          <el-form-item label="任务分组" prop="jobGroup">
            <el-input size="mini" class="ui-item-reset" v-model="quartzItem.jobGroup" disabled></el-input>
          </el-form-item>
          <el-form-item label="cron表达式" prop="cronExpression">
            <el-input size="mini" class="ui-item-reset" v-model="quartzItem.cronExpression" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="参数" prop="invokeParam">
            <el-input size="mini" class="ui-item-reset" v-model="quartzItem.invokeParam" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input size="mini"type="textarea"  class="ui-item-reset" v-model="quartzItem.remark" :disabled="editFlag"></el-input>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'quartzDetail',
    data() {
      return {
        quartzId: this.$route.query.quartzId,
        quartzItem:{
          quartzId:'',
          jobName: '',
          jobGroup: '',
          startTime: '',
          cronExpression: '',
          invokeParam:'',
          status:'',
          remark:'',
        },
        editFlag: true,

      }
    },
    created() {
      this.getData()
    },
    methods: {
      back() {
        console.log(this.$route)
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        // this.getItem()
      },
      getData() {
        post(`/pms_api/quartz/list`, {'quartzId': this.quartzId}).then(res => {
          // console.log('res', res)
          console.log(this.quartzId)
          this.quartzItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      saveItem() {
        post(`/pms_api/quartz/updateJob`, this.quartzItem).then(res => {
          this.cancelEdit()
          this.getData()
        }).catch(err => {
          console.log(err)
        })
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
